<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><button onclick="goto('/a')">/a</button></li>
        <li><button onclick="goto('/b')">/b</button></li>
        <li><button onclick="goto('/c')">/c</button></li>
    </ul>
    <div id="app"></div>
    <script>
        var globalHistory = window.history;
        function goto(to){
            globalHistory.pushState(null,null,to);
        }
        //当浏览器的路径发生改变的时候就执行此回调函数
        function onUrlChange(){
            document.getElementById('app').innerHTML = window.location.pathname;///a
        }
        //当浏览器前进后退，或者调用history的go、back 、forward方法的时候执行此回调函数
        window.onpopstate = onUrlChange;
        //获取老的pushState方法
        var {pushState} = globalHistory;
        //重写history对象的pushState属性，等于一个新的方法
        globalHistory.pushState = function(...args){
            //在新方法在调用老的方法
            pushState.apply(globalHistory,args);
            onUrlChange();
        }

    </script>
</body>
</html>